<template>
	<view id="gold">
		<!-- 头部 -->
		<view class="gold-background">
			<view class="gold-paice">
				<text>2.48</text>
			</view>
			<view class="gold-newest">七日年化收益率(%)</view>

			<view class="gold-Decline">
				<view class="gold-item">
					<text class="item-text">0.6709</text><br>
					<text class="item-texttwo">万份收益(02-26)</text>
				</view>
				<view class="gold-item">
					<text class="item-text">100.00</text><br>
					<text class="item-texttwo">起购金额</text>
				</view>
			</view>
		</view>

		<!-- 七日年化率收益曲线 -->
		<view class="gold-trend">
			<!-- 七日年化率收益曲线 -->
			<view class="exclusive-title">
				<view>
					<view class="title-box"></view>
					<view class="title">七日年化收益曲线</view>
				</view>
				<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="title-log"></image>
			</view>

			<!-- 折线图 -->
			<view class="line-chart">
				<view class="charts-box">
				  <qiun-data-charts
				    type="line"
				    :chartData="chartsData"
				    background="none"
				    :animation="false"
				    :ontouch="true"
				  />
				</view>
				
				<view class="charts-item">
					<view class="lastItem">分时</view>
					<view class="lastItem active">近一月</view>
					<view class="lastItem">近半年</view>
					<view class="lastItem">近一年</view>
				</view>
			</view>
			
			<!-- 基本档案，交易规则，常见问题 -->
			<view class="information">
		
				<view class="information-item" v-for="item in information" :key="item._id">
					<text class="information-text" :class="{informationText:item.name==informationActive}" @tap="switchData(item.name)">{{item.name}}</text>
					<view :class="{informationActive:item.name==informationActive}" @tap="switchData"></view>
				</view>
				
			</view>
			
			
			<!-- 基本档案 -->
			<view class="" v-if="informationActive=='基本档案'">
				
				<!-- 基本信息 -->
				<view class="essential-information" >
					<view class="essential-titll">
						<text class="titll-text">基本信息</text>
					</view>
					
					<view class="essential-vice-titll">
						<view class="vice-titll">基金全称</view>
						<view class="vice-text">汇添富双利债券型证券投资基金</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">基金代码</view>
						<view class="vice-text">470018</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">基金类型</view>
						<view class="vice-text no-line">债券型(低风险)</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">基金状态</view>
						<view class="vice-text">开放交易</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">成立日期</view>
						<view class="vice-text">2011-01-26</view>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">基金经理</view>
						<view class="vice-text">杨宇宁</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="vice-image"></image>
					</view>
					<view class="essential-vice-titll">
						<view class="vice-titll">基金公司</view>
						<view class="vice-text">汇添富基金管理股份有限公司</view>
						<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="vice-image"></image>
					</view>
				
				</view>
				
				<!-- 资产配置 -->
				<view class="exclusives-title">
					<view class="titles-box"></view>
					<view class="titles">资产配置</view>
				</view>
				
				<!-- 资产配置饼图 -->
				<view class="essential-information" >
					<view class="charts-boxs">
							<qiun-data-charts
							type="ring"
							:chartData="chartTwoData"
							:echartsH5="true"
							:echartsApp="true"
							background="none"
							:animation="false"
							/>
					</view>
				</view>
				
			</view>
			
			
			
			
			
			<!-- 交易规则 -->
			<view class="" v-if="informationActive=='交易规则'">
				<!-- 购买规则 -->
				<view class="essential-information" >
					<view class="essential-titll goumai">
						<text class="titll-text">购买规则</text>
					</view>
					<view class="trading-line">
						<image v-for="item in line" :src="item.url" mode="" class="trading-image" :key="item._id"></image>
					</view>
					<view class="trading-text">
						<view class="trading-text-item">
							<text class="item-text-one">T日15点前</text><br>
							<text class="item-text-two">购买</text>
						</view>
						<view class="trading-text-item">
							<text class="item-text-one">T+1日17点后</text><br>
							<text class="item-text-two">确认份额</text>
						</view>
						<view class="trading-text-item">
							<text class="item-text-one">T+日</text><br>
							<text class="item-text-two">查看收益</text>
						</view>
						<view class="trading-text-item">
							<text class="item-text-one">T+日起</text><br>
							<text class="item-text-two">可赎回</text>
						</view>
					</view>
					<view class="day-text">
						<text>*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
					</view>
					
					<!-- 表格 -->
					<view class="content" style="padding-bottom: 50rpx;">
						<uni-table border stripe emptyText="暂无更多数据">
						    <!-- 表头行 -->
						    <uni-tr>
						        <uni-th align="center" class="th">金额(元)</uni-th>
						        <uni-th align="center" class="th">费用</uni-th>
						  
						    </uni-tr>
						    <!-- 表格数据行 -->
						    <uni-tr v-for="item in tableData" :key="item._id">
						        <uni-td align="center">{{item.trTexo}}</uni-td>
						        <uni-td align="center"><text class="decoration">{{item.trText}}</text>{{item.seize}}{{item.trTexs}}</uni-td>
						   
						    </uni-tr>
						
						</uni-table>
					</view>
				
				</view>
				
				<!-- 赎回规则 -->
				<view class="essential-information">
					<view class="essential-titll goumai">
						<text class="titll-text">赎回规则</text>
					</view>
					<view class="trading-line">
						<image v-for="item in lineTwo" :src="item.url" mode="" class="trading-image" :key="item._id"></image>
					</view>
					<view class="trading-text">
						<view class="trading-text-item">
							<text class="item-text-one">T日15点前</text><br>
							<text class="item-text-two">赎回</text>
						</view>
						<view class="trading-text-item morenText">
							<text class="item-text-one">T+1日17点后</text><br>
							<text class="item-text-two">确认份额及到账金额</text>
						</view>
						<view class="trading-text-item">
							<text class="item-text-one">T+2日</text><br>
							<text class="item-text-two">24点前到账</text>
						</view>
					</view>
					<view class="day-text">
						<text>*T日为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
					</view>
					
					<!-- 表格 -->
					<view class="content" style="padding-bottom: 50rpx;">
						<uni-table border stripe emptyText="暂无更多数据">
						    <!-- 表头行 -->
						    <uni-tr>
						        <uni-th align="center" class="th">金额(元)</uni-th>
						        <uni-th align="center" class="th">费用</uni-th>
						  
						    </uni-tr>
						    <!-- 表格数据行 -->
						    <uni-tr v-for="item in tableTwoData" :key="item._id">
						        <uni-td align="center">{{item.trTexo}}</uni-td>
						        <uni-td align="center">{{item.trTexs}}</uni-td>
						   
						    </uni-tr>
						
						</uni-table>
					</view>
				
				</view>
				
				<!-- 运作费用 -->
				<view class="essential-information">
					<view class="essential-titll">
						<text class="titll-text">运作费用</text>
					</view>
					
					<!-- 表格 -->
					<view class="content" style="padding-bottom: 50rpx;">
						<uni-table border stripe emptyText="暂无更多数据">
						    <!-- 表格数据行 -->
						    <uni-tr v-for="item in tableThreeData" :key="item._id">
						        <uni-td align="center">{{item.trTexo}}</uni-td>
						        <uni-td align="center">{{item.trTexs}}</uni-td>
						   
						    </uni-tr>
						
						</uni-table>
					</view>
				
				</view>
				
	
				
			</view>

			
			
			
			
			<!-- 常见问题 -->
			<view class="essential-information problem-active" v-if="informationActive=='常见问题'">
				
				<view class="problem">
					<text class="problem-questions">什么是基金？</text>
				</view>
				<view class="problem-tips">
					<text class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>
				<view class="problem">
					<text class="problem-questions">基金是什么？</text>
				</view>
				<view class="problem-tips">
					<text class="problem-text">基金(全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
				</view>
				
				
			</view>
			
			
			<!-- 底部描述 -->
			<view class="fool">
				<text class="fool-text">基金销售服务由成都宇宁基金销售有限公司提供</text><br>
				<text class="fool-text-item">投资前请详细阅读基金合同，招募说明。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎</text>
			</view>
			
			<!-- 立即购买 -->
			<view class="buynow">
				<view class="buynow-item">
					<image src="https://z3.ax1x.com/2021/04/22/cOAEOf.png" mode="" class="buynow-image"></image>
					<text class="buynow-text">收藏</text>
				</view>
				<view class="buynow-item"> 
					<image src="https://z3.ax1x.com/2021/04/22/cOAA6P.png" mode="" class="buynow-image"></image>
					<text class="buynow-text">圈子</text>
				</view>
				<view class="buynow-item buy-active">定投</view>
				<view class="buynow-item buy-activetwo" @tap="jump">立即购买</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartsData:{
				   "categories": ["01-28","","","","02-09","","","","02-26"],
				      "series": [
				          {
				            "name": "成交量A",
				            "data": [358,380,370,395,371,355,379,382.5,386]
				          },
						{
				      			"name": "成交量B",
				      			"data": [370,365,377,381,389,372,379,391,395]
				      	}
				      ]
				},
				chartTwoData:{
					"series": [
					        {
					            "data": [
					                {
					                    "name": "债务卷77.61%",
					                    "value": 77.61
					                },
					                {
										"name": "现金1.79%",
										"value": 1.79
					                },
					                {
					                    "name": "股票17.88%",
					                    "value": 17.88
					                }
					            ]
					        }
					    ]
				},
				information:[
					{_id:1,name:"基本档案"},
					{_id:2,name:"交易规则"},
					{_id:3,name:"常见问题"}
				],
				informationActive:"基本档案",
				
				line:[
					{_id:1,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:2,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:3,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:4,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:5,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:6,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:7,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:8,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:9,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:10,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:11,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:12,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:13,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:14,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:15,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:16,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:17,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:18,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:19,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:20,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:21,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:22,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:23,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:24,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:25,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'}
				],
				lineTwo:[
					{_id:1,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:2,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:3,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:4,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:5,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:6,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:7,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:8,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:9,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:10,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:11,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:12,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:13,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:14,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:15,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:16,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:17,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:18,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:19,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:20,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:21,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:22,url:'https://z3.ax1x.com/2021/04/22/cOAdh9.png'},
					{_id:23,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:24,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:25,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'},
					{_id:26,url:'https://z3.ax1x.com/2021/04/22/cOAt7F.png'}
				],
				
				tableData:[
					{_id:1,trTexo:'0 ≤ 金额 < 100万',trText:'1.5%',trTexs:'0.6%',seize:' '},
					{_id:2,trTexo:'100万 ≤ 金额 < 200万',trText:'1%',trTexs:'0.6%',seize:' '},
					{_id:3,trTexo:'200万 ≤ 金额 < 500万',trText:'0.3%',trTexs:'0.3%',seize:' '},
					{_id:4,trTexo:'金额 ≥ 500万',trText:'1000元',trTexs:'1000元',seize:' '}
				],
				tableTwoData:[
					{_id:1,trTexo:'7天 ≤ 持有期限 < 365天',trTexs:'0.50%'},
					{_id:2,trTexo:'1年 ≤ 持有期限 < 2年',trTexs:'0.25%'},
					{_id:3,trTexo:'持有期限 ≥ 2年',trTexs:'0.00%'},
					{_id:4,trTexo:'0天 ≤ 持有期限 < 7天',trTexs:'1.50%'}
				],
				tableThreeData:[
					{_id:1,trTexo:'管理费',trTexs:'1.50%'},
					{_id:2,trTexo:'托运费',trTexs:'0.25%'},
					{_id:3,trTexo:'销售服务费',trTexs:'--'}
				],
				
			}
		},
		methods: {
			switchData(val){
				this.informationActive=val
			},
			jump(){
				uni.navigateTo({
					url:'/pages/buynow/buynow'
				})
			}
		}
	}
</script>

<style>
	#gold {
		position: relative;
	}

	.gold-background {
		width: 100%;
		height: 400rpx;
		/* border: 1px solid red; */
		background: url('https://z3.ax1x.com/2021/04/22/cOFgKK.png') no-repeat;
		background-size: 100% 430rpx;
		position: relative;
	}

	.gold-paice {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		text-align: center;
		font-size: 60rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
		padding-top: 20rpx;
		margin-bottom: 8rpx;
	}

	.gold-newest {
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto 8rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}

	.gold-Decline {
		width: 100%;
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-evenly;
	}

	.gold-item {
		width: 260rpx;
		height: 140rpx;
		/* border: 1px solid red; */
		line-height: 60rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.item-text {
		font-size: 40rpx;
		font-family: Lato;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item-texttwo {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.7;
	}


	/* 七日年化率收益曲线 */
	.gold-trend {
		width: 100%;
		height: auto;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		/* border: 1px solid red; */
		position: absolute;
		top: 335rpx;
		background-color: #FFFFFF;
	}

	/* 七日年化率收益曲线 */
	.exclusive-title {
		width: 700rpx;
		height: 100rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		clear: both;
	}

	.title-box {
		/* border: 1px solid red; */
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 36rpx;
		margin-right: 10rpx;
		float: left;
		display: inline-block;
	}

	.title {
		/* border: 1px solid red; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		display: inline-block;
	}

	.title-log {
		/* border: 1px solid red; */
		width: 28rpx;
		height: 28rpx;
		margin-top: 36rpx;
	}

	/* 折线图 */
	.line-chart { 
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto;

		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}
	.charts-item{
		width: 620rpx;
		height: 52rpx;
		margin: 40rpx auto 30rpx;
		/* border: 1px solid red; */
		display: flex;
	}
	.lastItem{
		width: 100%;
		height: 52rpx;
		border: 1rpx solid #F3F3F3;
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.active{
		background: #3476F1;
		color: #FFFFFF;
	}
	
	
	/* 基本档案*/
	.information{
		width: 700rpx;
		height: 114rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
	}
	.information-item{
		width: 148rpx;
		height: 86rpx;
		/* border: 1px solid red; */
		text-align: center;
		padding-top: 28rpx;
	}
	.information-text{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	
	.informationActive{
		width: 54rpx;
		height: 8rpx;
		background: #3476F1;
		border-radius: 6rpx;
		margin: 10rpx auto 0rpx;
	}
	.informationText{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476F1;
	}
	
	/* 基本信息 */
	.essential-information{
		width: 700rpx;
		height: auto;
		/* border: 1px solid red; */
		margin: 0rpx auto 40rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		border-radius: 18rpx;
	}
	.essential-titll{
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
		/* border: 1px solid red; */
		margin: 0rpx auto;
	}
	.titll-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 88rpx;
	}
	
	
	.essential-vice-titll{
		width: 642rpx;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.03);
		margin: 0rpx auto;
		display: flex;
		/* border: 1px solid red; */
		clear: both;
	}
	.vice-titll{
		width: 150rpx;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}
	.vice-text{
		width: 100%;
		height: 88rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
		word-wrap: break-word;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}
	.vice-image{
		width: 28rpx;
		height: 28rpx;
		/* border: 1rpx solid red; */
		margin-top: 28rpx;
	}
	/* 资产配置 */
	.exclusives-title {
		width: 700rpx;
		height: 50rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto 18rpx;
		display: flex;
		line-height: 50rpx;
		clear: both;
	}
	.titles-box {
		/* border: 1px solid red; */
		width: 8rpx;
		height: 30rpx;
		background: #3476F1;
		border-radius: 12rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		/* float: left; */
	}
	.titles {
		/* border: 1px solid red; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	/* 饼图 */
	.charts-boxs{
		width: 100%;
		height: 300rpx;
	}
	
	
	
	/* 购买规则 */
	.goumai{
		height: 60rpx;
		border-bottom: none;
	}
	.trading-line{
		width: 658rpx;
		height: 50rpx;
		/* border: 1px solid red; */
		margin: 10rpx auto 0rpx;
	}
	.trading-image{
		width: 26rpx;
		height: 26rpx;
	}
	
	.trading-text{
		width: 642rpx;
		height: auto;
		/* border: 1px solid red; */
		display: flex;
		margin: 0rpx auto;
	}
	.trading-text-item{
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
		text-align: center;
	}
	.morenText{
		width: 150%;
	}
	.item-text-one{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F85656;
	}
	.item-text-two{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #717171;
	}
	.day-text{
		width: 642rpx;
		height: auto;
		margin: 44rpx auto;
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 交易规则 表格 */
	.content{
		width: 642rpx;
		margin: 0rpx auto;
	}
	.decoration{
		text-decoration: line-through;
	}
	
	
	/* 交易规则底部描述文字 */
	.fool{
		width: 700rpx;
		height: auto;
		margin: 0rpx auto  140rpx;
	}
	.fool-text{
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #727272;
	}
	.fool-text-item{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8c8c8c;
	}
	
	
	/* 立即购买 */
	.buynow{
		background: #FFFFFF;
		width: 100%;
		height: 100rpx;
		/* border: 1px solid red; */
		display: flex;
		position: fixed;
		box-shadow: 0px -8rpx 20rpx rgba(0, 0, 0, 0.05);
		bottom: 0rpx;
	}
	.buynow-item{
		width: 100%;
		height: 100rpx;
		/* border: 1px solid red; */
		text-align: center;
	}
	.buynow-image{
		width: 46rpx;
		height: 46rpx;
		/* border: 1px solid red; */
		display: block;
		margin-left: 41rpx;
		margin-top: 10rpx;
	}
	.buynow-text{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		/* border: 1px solid red; */
	}
	.buy-active{
		width: 180%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 100rpx;
		color: #FFFFFF;
		background: #E2BC7F;
		text-align: center;
	}
	.buy-activetwo{
		width: 180%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 100rpx;
		color: #FFFFFF;
		background: #3476F1;
		text-align: center;
	}
	
	
	
	
	/* 常见问题 */
	.problem-active{
		padding: 30rpx;
		/* border: 1px solid red; */
		width: 670rpx;
	}
	.problem{
		text-align: right;
		margin: 20rpx;
	}
	.problem-questions{
		width: auto;
		height: 88rpx;
		display: inline-block;
		background-color: #3476F1;
		padding: 0rpx 15rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 24rpx;
	}
	
	.problem-tips{
		width: 622rpx;
		height: auto;
		border: 1rpx solid #F1F1F1;
		padding: 15rpx;
		border-radius: 24rpx;
		color: #727272;
		font-size: 24rpx;
	}
</style>
